# Sliding Panels

## Examples


### Basic

```typescript
import React, { Component } from 'react';

import Button from '@splunk/react-ui/Button';
import ControlGroup from '@splunk/react-ui/ControlGroup';
import Heading from '@splunk/react-ui/Heading';
import P from '@splunk/react-ui/Paragraph';
import SlidingPanels from '@splunk/react-ui/SlidingPanels';
import Text from '@splunk/react-ui/Text';


class Basic extends Component<
    object,
    { activePanelId: string; transition: 'forward' | 'backward' }
> {
    constructor(props: object) {
        super(props);
        this.state = {
            activePanelId: 'one',
            transition: 'forward',
        };
    }

    goBack = () => {
        this.setState((state) => ({
            activePanelId: state.activePanelId === 'one' ? 'two' : 'one',
            transition: 'backward',
        }));
    };

    goForward = () => {
        this.setState((state) => ({
            activePanelId: state.activePanelId === 'one' ? 'two' : 'one',
            transition: 'forward',
        }));
    };

    render() {
        const { activePanelId, transition } = this.state;

        return (
            <div style={{ border: '1px solid #999' }}>
                <SlidingPanels activePanelId={activePanelId} transition={transition}>
                    <SlidingPanels.Panel
                        key="one"
                        panelId="one"
                        style={{ width: '100%', padding: 10 }}
                    >
                        <Heading level={2}>First</Heading>
                        <ControlGroup
                            label="Field label"
                            tooltip="Tooltip helps explain the label."
                            help="This is the help text."
                        >
                            <Text canClear />
                        </ControlGroup>
                        <Button onClick={this.goBack}>Prev</Button>
                        <Button appearance="primary" onClick={this.goForward}>
                            Next
                        </Button>
                    </SlidingPanels.Panel>
                    <SlidingPanels.Panel
                        key="two"
                        panelId="two"
                        style={{ width: '100%', padding: 10 }}
                    >
                        <Heading level={2}>Second</Heading>
                        <P>
                            This is some content inside the second panel. You can add more details
                            here as needed.
                        </P>
                        <ControlGroup
                            label="Field label"
                            tooltip="Tooltip helps explain the label."
                            help="This is the help text."
                        >
                            <Text canClear />
                        </ControlGroup>
                        <Button onClick={this.goBack}>Prev</Button>
                        <Button appearance="primary" onClick={this.goForward}>
                            Next
                        </Button>
                    </SlidingPanels.Panel>
                </SlidingPanels>
            </div>
        );
    }
}

export default Basic;
```



### In a Dropdown

```typescript
import React, { Component } from 'react';

import ChevronLeft from '@splunk/react-icons/ChevronLeft';
import Button from '@splunk/react-ui/Button';
import Dropdown, { DropdownPossibleCloseReason } from '@splunk/react-ui/Dropdown';
import Menu from '@splunk/react-ui/Menu';
import SlidingPanels from '@splunk/react-ui/SlidingPanels';


class DropdownExample extends Component<
    object,
    { activePanelId: string; transition: 'forward' | 'backward' }
> {
    constructor(props: object) {
        super(props);
        this.state = {
            activePanelId: 'one',
            transition: 'forward',
        };
    }

    goBack = () => {
        this.setState((state) => ({
            activePanelId: state.activePanelId === 'one' ? 'two' : 'one',
            transition: 'backward',
        }));
    };

    goForward = () => {
        this.setState((state) => ({
            activePanelId: state.activePanelId === 'one' ? 'two' : 'one',
            transition: 'forward',
        }));
    };

    render() {
        const { activePanelId, transition } = this.state;
        const toggle = <Button isMenu />;
        const closeReasons: DropdownPossibleCloseReason[] = [
            'clickAway',
            'escapeKey',
            'offScreen',
            'toggleClick',
        ];
        return (
            <Dropdown closeReasons={closeReasons} toggle={toggle}>
                <SlidingPanels activePanelId={activePanelId} transition={transition}>
                    <SlidingPanels.Panel key="one" panelId="one">
                        <Menu style={{ width: 160 }}>
                            <Menu.Item hasSubmenu onClick={this.goForward}>
                                Category 1
                            </Menu.Item>
                            <Menu.Item hasSubmenu onClick={this.goForward}>
                                Category 2
                            </Menu.Item>
                            <Menu.Item hasSubmenu onClick={this.goForward}>
                                Category 3
                            </Menu.Item>
                            <Menu.Item hasSubmenu onClick={this.goForward}>
                                Category 4
                            </Menu.Item>
                            <Menu.Item hasSubmenu onClick={this.goForward}>
                                Category 5
                            </Menu.Item>
                            <Menu.Item hasSubmenu onClick={this.goForward}>
                                Category 6
                            </Menu.Item>
                            <Menu.Item hasSubmenu onClick={this.goForward}>
                                Category 7
                            </Menu.Item>
                            <Menu.Item hasSubmenu onClick={this.goForward}>
                                Category 8
                            </Menu.Item>
                        </Menu>
                    </SlidingPanels.Panel>
                    <SlidingPanels.Panel key="two" panelId="two">
                        <Menu style={{ width: 160 }}>
                            <Menu.Item startAdornment={<ChevronLeft />} onClick={this.goBack}>
                                Back
                            </Menu.Item>
                            <Menu.Divider />
                            <Menu.Item>Option 1</Menu.Item>
                            <Menu.Item>Option 2</Menu.Item>
                            <Menu.Item>Option 3</Menu.Item>
                            <Menu.Item>Option 4</Menu.Item>
                            <Menu.Item>Option 5</Menu.Item>
                            <Menu.Item>Option 6</Menu.Item>
                            <Menu.Item>Option 7</Menu.Item>
                        </Menu>
                    </SlidingPanels.Panel>
                </SlidingPanels>
            </Dropdown>
        );
    }
}

export default DropdownExample;
```



### In a Modal

```typescript
import React, { useRef, useState } from 'react';

import Button from '@splunk/react-ui/Button';
import CollapsiblePanel from '@splunk/react-ui/CollapsiblePanel';
import ControlGroup from '@splunk/react-ui/ControlGroup';
import Heading from '@splunk/react-ui/Heading';
import Modal from '@splunk/react-ui/Modal';
import P from '@splunk/react-ui/Paragraph';
import SlidingPanels from '@splunk/react-ui/SlidingPanels';
import Text from '@splunk/react-ui/Text';


function ModalExample() {
    const [activePanelId, setActivePanelId] = useState<string>('one');
    const [modalOpen, setModalOpen] = useState<boolean>(false);
    const [transition, setTransition] = useState<'forward' | 'backward'>('forward');
    const modalToggle = useRef<HTMLButtonElement | null>(null);

    const goBack = () => {
        setActivePanelId(activePanelId === 'one' ? 'two' : 'one');
        setTransition('backward');
    };

    const goForward = () => {
        setActivePanelId(activePanelId === 'one' ? 'two' : 'one');
        setTransition('forward');
    };

    const open = () => {
        setModalOpen(true);
    };

    const close = () => {
        setModalOpen(false);
    };

    return (
        <div>
            <Button elementRef={modalToggle} label="Open modal" onClick={open} />
            <Modal returnFocus={modalToggle} onRequestClose={close} open={modalOpen}>
                <Modal.Header title="SlidingPanels in a Modal" />
                <Modal.Body style={{ padding: 0 }}>
                    <SlidingPanels activePanelId={activePanelId} transition={transition}>
                        <SlidingPanels.Panel
                            key="one"
                            panelId="one"
                            style={{ padding: 20, width: 350 }}
                        >
                            <Heading level={2}>First</Heading>
                            <ControlGroup
                                label="Field Label"
                                tooltip="Tooltip helps explain the label."
                                help="This is the help text."
                            >
                                <Text canClear />
                            </ControlGroup>
                        </SlidingPanels.Panel>
                        <SlidingPanels.Panel
                            key="two"
                            panelId="two"
                            style={{ padding: 20, width: 800 }}
                        >
                            <CollapsiblePanel title="Sub Section">
                                <P>This is some content inside the sub section panel.</P>
                                <ControlGroup
                                    label="Field Label"
                                    tooltip="Tooltip helps explain the label."
                                    help="This is the help text."
                                >
                                    <Text canClear />
                                </ControlGroup>
                            </CollapsiblePanel>
                            <CollapsiblePanel title="Sub Section">
                                <P>Additional content for the second sub section.</P>
                            </CollapsiblePanel>
                        </SlidingPanels.Panel>
                    </SlidingPanels>
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={goBack}>Prev</Button>
                    <Button appearance="primary" onClick={goForward}>
                        Next
                    </Button>
                </Modal.Footer>
            </Modal>
        </div>
    );
}

export default ModalExample;
```




## API


### SlidingPanels API

#### Props

| Name | Type | Required | Default | Description |
|------|------|------|------|------|
| activePanelId | string \| number | yes |  |  |
| children | React.ReactNode | no |  |  |
| elementRef | React.Ref<HTMLDivElement> | no |  | A React ref which is set to the DOM element when the component mounts and null when it unmounts. |
| innerClassName | string | no |  | An additional className to inner container. |
| innerStyle | React.CSSProperties | no |  |  |
| onAnimationEnd | () => void | no |  |  |
| outerClassName | string | no |  | An additional className to outer container. |
| outerStyle | React.CSSProperties | no |  |  |
| transition | 'forward' \| 'backward' | no | 'forward' | Direction to slide the panel |



### SlidingPanels.Panel API

Container for arbitrary content.

#### Props

| Name | Type | Required | Default | Description |
|------|------|------|------|------|
| children | React.ReactNode | no |  |  |
| elementRef | React.Ref<HTMLDivElement> | no |  | A React ref which is set to the DOM element when the component mounts and null when it unmounts. |
| panelId | string \| number | yes |  | A unique `id` for this panel and used by the SlidingPanels to keep track of the open panel. |